<template>
    <div class="kw-select-warp">
        <div class="kw-select-title">{{title}}</div>
        <div
            class="kw-select-option" 
            v-bind:class="{'active' : selectedVal == item.value }" v-for="(item, $key) in options" @click="optionClick(item)"
        >
            {{item.name}}
            <i class="triangle"></i>
        </div>
    </div>
</template>

<script type="text/babel">

    export default {
        data() {
            return {
                
            };
        },
        props: {
            options: {
                type: Array
            },
            title: {
                type: String
            },
            optionClick: {
                type: Function
            },
            selectedVal: {
                type: [String,Number]
            }
        },
        created(){
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
    .kw-select-warp {
        min-height: 50px;
        margin-bottom: 16px;
        overflow: hidden;
        position: relative;
    }
    .kw-select-title{
        min-width: 50px;
        text-align: left;
        font-size: 13px;;
        float: left;
        line-height: 50px;
        margin-right: 16px;
    }
    .kw-select-option{
        float: left;
        margin-top: 10px;
        position: relative;
        margin-right: 8px;
        font-size: 13px;;
        color: rgb(155, 157, 158);
        padding: 0px 8px;
        line-height: 30px;
        height: 30px;
        /*border-radius: 5px;*/
        border-width: 1px;
        border-style: solid;
        border-color: rgb(155, 157, 158);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .triangle{
        opacity: 0;
        background-image: url(../img/check.png);
        width: 12px;
        height: 12px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .active .triangle{
        opacity: 1;
    }
</style>